﻿<template>
  <a-drawer
    :destroyOnClose="true"
    :loading="loading"
    :title="title"
    :visible="visible"
    width="70%"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="产品" prop="BMainCode">
              <InventorySelect v-model="entity.BMainCode" placeholder="选择产品" @onConfirm="onInventory" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="别名" prop="AliasName">
              <a-input v-model="entity.AliasName" autocomplete="off" placeholder="别名" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="版本号" prop="Version">
              <a-input v-model="entity.Version" autocomplete="off" placeholder="版本号" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="版本说明" prop="VersionRemark">
              <a-input v-model="entity.VersionRemark" autocomplete="off" placeholder="版本说明" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="备注" prop="Remark">
              <a-input v-model="entity.Remark" autocomplete="off" placeholder="备注" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="更新日期" prop="Remark">
              <a-date-picker v-model="entity.CreateTime" :defaultValue="moment()" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div style="display: flex; align-items: center; justify-content: space-between; font-weight: bold; font-size: 20px">
      <span>BOM子项</span>
      <a-button style="margin-bottom: 10px" type="primary" @click="addData">添加</a-button>
    </div>
    <a-table
      ref="table"
      :columns="columns"
      :rowKey="(row, index) => index"
      :dataSource="data"
      :bordered="true"
      size="small"
      :pagination="false"
    >
      <template slot="dataIndex" slot-scope="text, record, index">
        <span>{{ index + 1 }}</span>
      </template>
      <template slot="cInvName" slot-scope="text, record, index">
        {{ record.cInvName || record.CostName }}
      </template>
      <template slot="type" slot-scope="text, record, index">
        {{ record.cInvCode ? '材料' : '成本项' }}
      </template>
      <template slot="Quantity" slot-scope="text, record, index">
        <a-input-number v-model="record.Quantity" :min="0" :step="1" :precision="0"></a-input-number>
      </template>
      <template slot="LossRate" slot-scope="text, record, index">
        <a-input-number v-model="record.LossRate" :min="0" :step="0.01" :precision="2"></a-input-number>
      </template>
      <template slot="Remark" slot-scope="text, record, index">
        <a-input v-model="record.Remark"></a-input>
      </template>
      <span slot="action" slot-scope="text, record, index">
        <template>
          <a-popconfirm title="确定删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDelete(index)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '4px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button @click="close"> 取消</a-button>&nbsp;
      <a-button :loading="loading" type="primary" @click="handleSubmit"> 保存</a-button>
    </div>
    <InventoryChoose ref="InventoryChoose" type="checkbox" @onChoose="handleChoose" />
  </a-drawer>
</template>

<script>
import InventorySelect from '@/components/InventorySelect/InventorySelect'
import InventoryChoose from '@/components/InventorySelect/InventoryChoose.vue'
import moment from 'moment'
const columns = [
  { title: '序号', dataIndex: 'Id', width: '50px', scopedSlots: { customRender: 'dataIndex' } },
  { title: '编号', dataIndex: 'cInvCode' },
  { title: '名称', dataIndex: 'cInvName', scopedSlots: { customRender: 'cInvName' } },
  { title: '规格', dataIndex: 'cInvStd' },
  { title: '类型', dataIndex: 'type', scopedSlots: { customRender: 'type' } },
  { title: '数量', dataIndex: 'Quantity', scopedSlots: { customRender: 'Quantity' }, width: '100px' },
  { title: '损耗率', dataIndex: 'LossRate', scopedSlots: { customRender: 'LossRate' }, width: '100px' },
  { title: '备注', dataIndex: 'Remark', scopedSlots: { customRender: 'Remark' }, width: '100px' },
  { title: '操作', dataIndex: 'action', width: '50px', scopedSlots: { customRender: 'action' }, align: 'center' },
]
export default {
  components: { InventorySelect, InventoryChoose },
  props: {
    parentObj: Object,
    disabled: { type: Boolean, required: false },
  },
  data() {
    return {
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: '',
      columns,
      data: [],
      moment,
    }
  },
  methods: {
    handleDelete(index) {
      this.data.splice(index, 1)
    },
    // 添加材料
    addData() {
      this.$refs.InventoryChoose.openChoose()
    },
    handleChoose(e) {
      if (this.data.length <= 0) this.data = e
      else {
        e.forEach((item) => {
          let idx = this.data.findIndex((im) => {
            if (im.cInvCode) return im.cInvCode == item.cInvCode
            else return item.Id == im.Id
          })
          if (idx === -1) this.data.unshift(item)
        })
      }
    },
    init() {
      this.data = []
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()
      this.title = title
      if (id) {
        this.loading = true
        this.$http.post('/CostManagement/bom_mainnode/GetShowBomNodeData?Id=' + id, { id: id }).then((resJson) => {
          this.loading = false
          this.entity = resJson.Data.bom_Mainnode
          this.entity.CreateTime = moment(this.entity.CreateTime)
          this.data = resJson.Data.bom_Subnodes
        })
      }
    },
    close() {
      this.visible = false
      this.entity = {}
    },
    onInventory(e) {
      this.$set(this.entity, 'BMainCode', e.cInvCode)
      this.$set(this.entity, 'BMainName', e.cInvName)
      this.$http.post('/CostManagement/bom_mainnode/GetBomInvenCount?BMainCode=' + e.cInvCode).then((res) => {
        if (res.Success) {
          this.$set(this.entity, 'Version', res.Data)
        }
      })
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        let idx = this.data.findIndex((item) => item.cInvCode && (!item.Quantity || !item.LossRate))
        if (idx > -1) return this.$message.error('子表中材料类型数据不完整')
        let data = this.data.map((item) => {
          // if (item.cInvName) {
          return {
            Id: '',
            BomMainId: '',
            SubCode: item.cInvCode,
            Quantity: item.Quantity,
            LossRate: item.LossRate,
            CostTermId: item.CostTermId || item.Id || '',
            CostType: item.cInvCode ? 0 : 1,
            CreatorId: '',
            CreateTime: '',
            ModifyDate: '',
            ModifyID: '',
            Deleted: true,
            Remark: item.Remark || '',
          }
          // }
        })
        let obj = {
          bom_Mainnode: this.entity,
          bom_Subnodes: data,
        }
        this.loading = true
        this.$http.post('/CostManagement/bom_mainnode/BomSaveData', obj).then((resJson) => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.parentObj.redoData()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
  },
}
</script>
